<template>
    <el-row style="height: 100%;    width: 100%;    position: fixed;">
        <el-col :span="13" style="background-color: rgb(211, 239, 255)">
            <img style="    position: absolute;    top: 30%;    left: 15%;" :src="loginMain" />

        </el-col>
        <el-col :span="11" >
            <img :src="loginBg" class="login-left-waves" />
            <div class="login_form" >
                <p class="login_tatil">Fastapi-vue3-admin</p>
                <el-form  :model="user" :rules="rules" status-icon
                          class="login">
                    <el-form-item prop="username">
                        <el-input size="large" v-model="user.username" placeholder="输入账户..." />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input size="large" v-model="user.password" placeholder="输入密码..." />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="large" style="width: 100%;" @click="onSubmit">登 录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>

<script setup lang="ts" name="loginIndex">
import loginMain from '@/assets/login_left.svg';
import loginBg from '@/assets/login-bg.svg';
import { reactive ,ref} from 'vue'
import { login } from '@/api/session.js'
import type { FormInstance, FormRules } from 'element-plus'
import { ElLoading } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()

const user = reactive({
    username: 'admin',
    password: '123456',
})



const rules = reactive<FormRules>({
    username: [
        { required: true, message: '请输入账户.', trigger: 'blur' },
    ],
    password:[
        { required: true, message: '请输入密码', trigger: 'blur' },
    ]
})
const onSubmit = async () => {
    const loading = ElLoading.service({
        lock: false,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const flag = await login(user)
    loading.close()
    if (flag) {
        await router.push('/')
    }
}



</script>

<style>
.login_form{
    width: 420px;
    background-color: #fff;
    padding: 40px 40px 40px 40px;
    border-radius: 10px;
    box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 35%;
    right: 10%;
}
.login_tatil{
    font-family: "Helvetica Neue",
    Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
    Arial, sans-serif;
    font-size: 34px;
    text-align: center;
}
.login{
    text-align: center;
    margin-top: 24px;
}
</style>
